<template>
    <div class="menu-container">
      <el-menu class="contacts-list" @select="handleContactSelect">
        <el-menu-item
          v-for="contact in chatStor.state.contacts"
          :key="contact.id"
          :index="contact.id.toString()"
          :class="{ 'active-contact': chatStor.state.activeContactId === contact.id }"
        >
          <div class="contact-avatar">
            <el-avatar :size="40" :src="contact.avatar">
              <img :src="contact.avatar" alt="Avatar">
            </el-avatar>
          </div>
          <div class="contact-info">
            <div class="contact-name-container">
              <span class="contact-name">{{ contact.contactName }}</span>
            </div>
            <span class="last-message">{{ contact.lastMessage }}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
</template>

<script setup lang="ts">
import {chatStore} from '@/stores/disk/chat'
const chatStor=chatStore()

//点击联系人
const handleContactSelect = (index: any) => {
  //显示聊天窗口
  chatStor.showAll()
  //存储当前选中的联系人id
  chatStor.updateActiveContactId(parseInt(index))
  //遍历contacts数组，找到当前选中的联系人
  const contact = chatStor.state.contacts.find(item => item.id === chatStor.state.activeContactId);
  chatStor.updateCurrentContact(contact)
  //获取聊天记录
  chatStor.getMessages()
};

</script>

<style scoped>
.menu-container {
  flex: 1;
  overflow: hidden; /* 隐藏外层滚动条 */
  position: relative;
}
.contacts-list {
  height: 100%;
  overflow-y: auto; /* 启用内层滚动条 */
}
/* 美化滚动条样式 */
.contacts-list::-webkit-scrollbar {
  width: 6px;
}

.contacts-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.contacts-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.contacts-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}


/* 选中联系人的样式 */
.active-contact {
  background-color: #e5f6ff !important;
  color: #212529 !important;
  border-left: 3px solid #007bff; /* 添加左侧高亮条 */
}

/* 联系人头像容器样式 */
.contact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

/* 联系人信息容器样式 */
.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  line-height: 1.2; /* 调整行高 */
}

/* 联系人姓名容器样式 */
.contact-name-container {
  display: flex;
  align-items: center;
  margin-bottom: 0; /* 减少底部边距 */
}

/* 联系人姓名样式 */
.contact-name {
  font-weight: 600;
  color: #212529;
  font-size: 14px;
}

/* 最后一条消息样式 */
.last-message {
  font-size: 12px;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 菜单项样式 */
.el-menu-item {
  height: 72px !important;
  display: flex !important;
  align-items: center;
  transition: background-color 0.3s;
  padding: 0 20px;
}

/* 菜单项悬停样式 */
.el-menu-item:hover {
  background-color: #e9ecef !important;
  cursor: pointer;
}

</style>